/*
 * @Author: zyk 997610780@qq.com
 * @Date: 2022-10-10 17:06:50
 * @LastEditors: zyk 997610780@qq.com
 * @LastEditTime: 2022-10-11 11:28:34
 * @FilePath: \fifty-small-projects\40 3D盒子背景\40.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */


let main_box = document.querySelector('.main_box')

let toggle_btn = document.querySelector('.toggle')

toggle_btn.addEventListener('click',()=> main_box.classList.toggle('big') )

function createdBox(){
  for (let i = 0; i < 4; i++) {
    for (let j = 0; j < 4; j++) {
      let box = document.createElement('div')
      box.classList.add('box')
      box.style.backgroundPosition = `${-j * 125}px ${-i * 125}px`
      main_box.appendChild(box)
    }
  }
}
createdBox()

